<script setup>
import { ref, onBeforeMount } from 'vue'
const show = ref(false)
const audioPlayer = ref(null)
const showPopup = () => {
  show.value = !show.value
  // audioPlayer.value.play()
}

onBeforeMount(() => {
  audioPlayer.value = document.querySelector('audio')
})
</script>

<template>
  <div>
    <router-view></router-view>
    <div class="music-pupple-con">
      <div class="music-pupple" v-if="show">
        <div class="music-item">
          <div class="audio_con">
            <div class="circle">
              <!-- <img src="@/assets/oo.png" alt="" /> -->
            </div>
            <audio controls autoplay loop class="myaudio">
              <source src="@/assets/wanfeng.mp3" type="audio/ogg" />
              <source src="@/assets/wanfeng.mp3" type="audio/mpeg" />
            </audio>
          </div>
        </div>
      </div>
    </div>

    <!-- 
        <div class="audio_con">
          <audio controls autoplay loop class="myaudio" ref="audioPlayer">
            <source src="../assets/wanfeng.mp3" type="audio/ogg" />
            <source src="../assets/wanfeng.mp3" type="audio/mpeg" />
          </audio>
        </div> -->

    <van-floating-bubble
      axis="xy"
      icon="audio"
      magnetic="x"
      @offset-change="onOffsetChange"
      @click="showPopup"
    />
  </div>
</template>

<style scoped>
div {
  margin: 0 auto;
}
.music-pupple-con {
  width: 100%;
  display: flex;
  justify-content: center;
}
.audio_con {
  /* position: fixed; */
  bottom: 0;
  /* width: 90%; */
  display: flex;
  background-color: #f1f3f4;
}
.myaudio {
  /* width: 250px; */
  height: 50px;

  outline: none;
  /* 
  background-color: #fff; */
}
.audio_con .circle {
  width: 50px;
  border-radius: 50px;
  height: 50px;

  animation: spin 4s linear infinite;
  background: url(@/assets/wan.jpg) no-repeat center;
  background-size: cover;
}
/* .audio_con .circle img {
  width: 45px;
  border-radius: 45px;
} */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#app .music-pupple {
  padding: 2px;
  display: flex;
  margin: 0 auto;
  position: fixed;
  bottom: 0;
}
.music-pupple .music-item {
  /* width: 100%; */

  /* background-color: #ccc; */
}
</style>
